<template>
	<!-- 视图容器 view  scroll-view滚动的视图容器,swiper-view 滑动容器
	 相当于html中的div
	 宽度沾满屏幕,高度文字的高,独占一行,
	 -->
	<view>
		<view class="red" hover-class="green" hover-start-time="100" hover-stay-time="1000">
			默认红色背景
		</view>
		<scroll-view scroll-y="true" class="sc-y" scroll-top="">
			<view class="box red">A</view>
			<view class="box green">B</view>
			<view class="box blue">C</view>
		</scroll-view>

		<scroll-view scroll-x class="sc-x">
			<view class="box red iblock">A</view>
			<view class="box green iblock">B</view>
			<view class="box blue iblock">C</view>
		</scroll-view>
		<!-- text 和html里边的span 主要是保存文字的, text标签只能包含text user-select 小程序 可选的
		使用特殊符号	decode 小程序也无法解析 &gt uni 无法解析 &lt;	
		-->
		<text user-select decode selectable>可选择 &nbsp; &gt; &amp; &apos; </text>
		<!-- indicator-dots 黑色原点,autoplay 自动播放 circular 循环 interval 几秒变下一个swiper-item duration 变化是的速度 -->
		<swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000">
			<swiper-item>
				<!-- 图片也可以 -->
				<view class="red box"></view>
			</swiper-item>
			<swiper-item>
				<view class="green box"></view>
			</swiper-item>
		</swiper>
		
		<button type="default" size="mini">按钮</button>
		<!-- 图片可以是相对路径和绝对路径 小程序 只能是相对路径, 绝对路基是 开发工具可以,真机不可以
		网站类型的绝对路径也可以,有默认值,宽320 高240  默认是拉伸填充完毕 scaleToFill,
		aspectFit保持比例,显示多的一方,aspectFill 保持比例,显示少的一方
		 -->
		<image src="../../static/link-01.png" mode="scaleToFill"></image>
		 <!-- 虽然下边都可以访问到,绝对路径建议使用@ -->
		<image src="@/static/link-01.png" mode="aspectFit"></image>
		<image src="/static/link-01.png" mode="aspectFill"></image>
		
		<!-- 富文本标签 -->
		<rich-text nodes='<h1>我是h1标签</h1>'></rich-text>
		<!-- id不支持,只支持class   uniapp 无法显示&lt; 小程序是可以的 -->
		<rich-text nodes='<h1> 可选择 &nbsp;  &gt; &lt; </h1>'></rich-text>
	</view>



</template>

<script>
	export default {}
</script>

<style>
	.sc-y {
		height: 200px;
		width: 100px;
		border: 1px solid #C0C0C0;
	}

	.sc-x {
		height: 200px;
		width: 100px;
		/* 不许换行 */
		white-space: nowrap;
	}

	.sc-x view {
		display: inline-block;
	}

	.box {
		height: 200px;
		width: 100px;
	}

	.red {
		background-color: #ff0000;
	}

	.green {
		background-color: #00ff00;
	}

	.blue {
		background-color: #0000ff;
	}
</style>
